<template>
  <layout-card ref="layoutRef" v-model="search" :filters="filterOptions" headline="数据筛选" headtitle="数据列表"
    @search-change="searchChange" @search-reset="searchReset">
    <template #action>
      <el-button type="primary" @click="exportData">导出</el-button>
    </template>
    <table-common ref="tableRef" :columns="loseGoodsColumns" :loading="loading" :pagination="pager"
      :table-data="tableData" size="large" @current-change="currentChange" @size-change="sizeChange"
      @sort-change="sortChange">
      <template #eventLevel="{ row }">
        <span>{{
          handleTranslate(filterOptions[0].inputProps.options, row.eventLevel)
        }}</span>
      </template>
      <template #processGroup="{ row }">
        <span>{{ row.processGroup.name }}</span>
      </template>
      <template #status="{ row }">
        <span>{{
          handleTranslate(filterOptions[6].inputProps.options, row.status)
        }}</span>
      </template>
      <template #creator="{ row }">
        <span>{{ row.creator.name }}</span>
      </template>
      <!-- 自定义操作栏示例  -->
      <template #action="{ row }">
        <el-button v-if="row.status == 20" class="link-btn" @click="
          router.push({
            name: '/collaborativeCommand/eventEscalation/see',
            query: { id: row.id, status: row.status },
          })
          " link type="primary">查看</el-button>
        <el-button v-if="row.status == 21 || row.status == 22" class="link-btn" @click="
          router.push({
            name: '/collaborativeCommand/collaborativeDisposal/filling',
            query: { id: row.id, status: row.status },
          })
          " link type="primary">填报</el-button>
        <el-button v-if="row.status == 30" class="link-btn" @click="
          router.push({
            name: '/collaborativeCommand/collaborativeDisposal/filling',
            query: { id: row.id, status: row.status },
          })
          " link type="primary">查看</el-button>
      </template>
    </table-common>
  </layout-card>
</template>

<script setup>
import { ref, reactive, onBeforeMount, computed } from "vue";
import LayoutCard from "@/components/LayoutCard/index.vue";
import TableCommon from "@/components/TableCommon/index.vue";
import { getResource } from "@/api/resource";
import { getEventType } from "@/api/collaborativeCommand/eventEscalation";
import {
  getCoordinationList,
  exportList,
  getUser,
} from "@/api/collaborativeCommand/collaborativeDisposal";
import { handleTranslate, downloadFile } from "../components/common.js";
import { filterOptions } from "./config/filter";
import { loseGoodsColumns } from "./config/columns";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import router from "@/router";

// 用户信息
const store = useStore();
const userInfo = computed(() => store.state.user.userInfo);
const isManager = store.getters["user/getIsManager"];
const creator = reactive({
  id: userInfo.value.userId,
  name: userInfo.value.name,
  organId: userInfo.value.organId,
  organName: userInfo.value.organName,
});

const tableData = ref([]);
const loading = ref(false);
const tableRef = ref();
const layoutRef = ref();
// 搜索参数
const search = ref({});
//排序
const order = ref([
  {
    column: "",
    method: "",
  },
]);
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
// 前后端分页不统一，特殊处理
const paging = computed(() => {
  return {
    pageNum: pager.currentPage,
    pageSize: pager.pageSize,
    total: pager.total,
  };
});
/**
 * 导出数据
 */
const exportData = () => {
  search.value = layoutRef.value?.getParams();
  exportList({ ...processParameters(), creator })
    .then((res) => {
      downloadFile(res, "多部门协同处置");
    })
    .catch((err) => {
      ElMessage.error(err.message || "导出数据失败");
    });
};

// 分页
const sizeChange = (size) => {
  pager.pageSize = size;
  loadData();
};
const currentChange = (value) => {
  pager.currentPage = value;
  loadData();
};

/**
 * 加载数据字典
 */
const loadDict = () => {
  Promise.all([
    getResource("event_rules_event_level"),
    getEventType(),
    getUser(),
  ]).then(([res1, res2, res3]) => {
    filterOptions.value[0].inputProps.options = res1.data.properties.meta;
    filterOptions.value[1].inputProps.options = res2.data.map((item) => ({
      value: item.id,
      label: item.name,
    }));
    filterOptions.value[4].inputProps.data = store.state.user.organTree;
    filterOptions.value[5].inputProps.options = res3.data.map((item) => ({
      value: item.userId,
      label: item.name,
    }));
    filterOptions.value[6].inputProps.options = [
      { value: "20", label: "待接收" },
      { value: "21", label: "待处置" },
      { value: "22", label: "处置中" },
      { value: "30", label: "已完结" },
    ];
  });
};

/**
 *  处理搜索参数
 */
const processParameters = () => {
  if (
    Array.isArray(search.value.eventTime) &&
    search.value.eventTime.length > 0
  ) {
    search.value.eventOccurStartTime = search.value.eventTime[0];
    search.value.eventOccurEndTime = search.value.eventTime[1];
  }
  if (
    Array.isArray(search.value.createTime) &&
    search.value.createTime.length > 0
  ) {
    search.value.reportStartTime = search.value.createTime[0];
    search.value.reportEndTime = search.value.createTime[1];
  }

  const obj = {
    ...search.value,
    processGroupId: isManager ? search.value.processGroupId : userInfo.organId,
  };
  obj.creatorName = filterOptions.value[5].inputProps.options?.find(
    (item) => item.value == search.value.creatorName
  )?.label;
  delete obj.eventTime;
  delete obj.createTime;
  return obj;
};
/**
 * 加载表格数据
 */
const loadData = () => {
  loading.value = true;
  const condition = { ...processParameters(), creator, order: order.value };
  if (order.value[0].method == "") {
    delete condition.order;
  }
  getCoordinationList({
    ...paging.value,
    condition,
  })
    .then((res) => {
      if (res.data) {
        loading.value = false;
        tableData.value = res.data.list;
        pager.currentPage = res.data.pageNum;
        pager.pageSize = res.data.pageSize;
        pager.total = res.data.total;
      }
    })
    .catch((err) => {
      loading.value = false;
      ElMessage.error(err.message || "获取数据失败");
    });
};
// 排序
const sortChange = (data) => {
  if (data.order) {
    order.value[0].column = data.prop;
    order.value[0].method = data.order == "ascending" ? "asc" : "desc";
  } else {
    order.value[0].column = "";
    order.value[0].method = "";
  }
  loadData();
};

/**
 * 点击查询
 */
const searchChange = (data) => {
  search.value = data;
  loadData();
};

/**
 * 点击重置
 * @param data 数据
 */
const searchReset = (data) => {
  search.value = data;
  pager.currentPage = 1;
  pager.pageSize = 10;
  order.value[0].column = "";
  order.value[0].method = "";
  tableRef.value.clearSort(); //清空排序
  loadData();
};
const initData = () => {
  loadDict();
  loadData();
};
onBeforeMount(initData);
</script>

<style lang="less" scoped>
// @import url('./index.less');
</style>
vue
